<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
        .result { margin-top: 10px; padding: 10px; background-color: #f5f5f5; border-radius: 3px; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        button { padding: 8px 16px; margin: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>校园外卖系统 API 测试</h1>
    
    <div class="test-section">
        <h3>测试系统统计API</h3>
        <button onclick="testSystemStats()">测试 /api/admin/stats</button>
        <div id="stats-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试今日统计API</h3>
        <button onclick="testTodayStats()">测试 /api/admin/today-stats</button>
        <div id="today-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>测试最近订单API</h3>
        <button onclick="testRecentOrders()">测试 /api/admin/recent-orders</button>
        <div id="orders-result" class="result"></div>
    </div>

    <script>
        const BASE_URL = 'http://localhost:8080'; // Spring Boot默认端口

        async function testAPI(url, resultElementId) {
            const resultElement = document.getElementById(resultElementId);
            resultElement.textContent = '请求中...';
            resultElement.className = 'result';
            
            try {
                const response = await fetch(BASE_URL + url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultElement.innerHTML = `
                        <strong>✅ 成功!</strong><br>
                        状态码: ${response.status}<br>
                        响应数据: <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                    resultElement.className = 'result success';
                } else {
                    const errorText = await response.text();
                    resultElement.innerHTML = `
                        <strong>❌ 失败!</strong><br>
                        状态码: ${response.status}<br>
                        错误信息: ${errorText}
                    `;
                    resultElement.className = 'result error';
                }
            } catch (error) {
                resultElement.innerHTML = `
                    <strong>❌ 网络错误!</strong><br>
                    错误信息: ${error.message}<br>
                    可能原因: 后端服务器未启动或端口不正确
                `;
                resultElement.className = 'result error';
            }
        }

        function testSystemStats() {
            testAPI('/api/admin/stats', 'stats-result');
        }

        function testTodayStats() {
            testAPI('/api/admin/today-stats', 'today-result');
        }

        function testRecentOrders() {
            testAPI('/api/admin/recent-orders?limit=5', 'orders-result');
        }

        // 页面加载时自动测试
        window.onload = function() {
            console.log('页面加载完成，可以开始测试API');
        };
    </script>
</body>
</html>